<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .canvas {
        border: 1px solid gray;
      }
    </style>
  </head>
  <body>
    <canvas class="canvas" width="500" height="500"></canvas>

    <script type="module">
      import initShader from "./utils/initShader.js";
      import vertex from "./shader/10/vertex.glsl?raw";
      import fragment from "./shader/10/fragment.glsl?raw";
      // 获取canvas
      const canvas = document.querySelector(".canvas");
      // 获取webgl上下文
      const gl = canvas.getContext("webgl");
      // 初始化着色器程序对象
      const program = initShader(gl, vertex, fragment);

      /*
       * 顶点数据
       * 数据结构：x, y
       [
          -0.5,0.5,
          0.5,0.5,
          0.5,-0.5,
          -0.5,-0.5,
       ]
       */
      const vertices = new Float32Array([-0.5, 0.5, 0.5, 0.5, 0.5, -0.5, -0.5, -0.5]);
      const buffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
      gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

      const aPositionIndex = gl.getAttribLocation(program, "aPosition");
      gl.vertexAttribPointer(
        aPositionIndex,
        2,
        gl.FLOAT,
        false,
        2 * Float32Array.BYTES_PER_ELEMENT,
        0,
      );
      gl.enableVertexAttribArray(aPositionIndex);

      // 传递矩阵变换参数
      const uTranslateIndex = gl.getUniformLocation(program, "uTranslate");
      const translate = [0.2, 0.2];
      gl.uniform2fv(uTranslateIndex, translate);

      // 绘制四边形
      gl.drawArrays(gl.POINTS, 0, 4);
      gl.drawArrays(gl.LINE_LOOP, 0, 4);
    </script>
  </body>
</html>
